<template>
  <div class="live-history">
    <timeline>
      <timeline-item v-for="stage in liveStageList" :key="stage.id" :time="formatDate(stage.stageDate, 'MM/DD')">
        <div class="live-history-item" @click="$router.push(`/live/stage/${stage.id}`)">
          <div class="item-top">
            <p>{{stage.summary}}</p>
          </div>
          <div class="item-bottom">
            <div class="text-left">
              <i class="icon icon-follow"></i>
              <span>{{stage.readCount}}</span>
            </div>
            <div class="text-center" v-if="stage.status === 1">
              <i class="icon icon-living"></i>
              <span style="color: #eb4339;">直播中</span>
            </div>
            <div class="text-center" v-if="stage.status === -1">
              <i class="icon icon-live-over"></i>
              <span>已结束</span>
            </div>
            <div class="text-right">
              <i class="icon icon-like"></i>
              <span>{{stage.likeCount}}</span>
            </div>
          </div>
        </div>
      </timeline-item>
    </timeline>
    <div class="text-center">
      <van-loading v-show="loading" type="spinner" size="24px">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Loading, Dialog } from 'vant';
import Timeline from '../../components/Timeline';
import TimelineItem from '../../components/TimelineItem';
import { pageLiveStageApp, getLiveDetail } from '../../api/live';
import dayjs from 'dayjs';
import { closeWebView } from '../../api/native';

export default {
  components: {
    Timeline,
    TimelineItem,
    [Loading.name]: Loading
  },

  data() {
    return {
      page: 1,
      size: 10,
      liveStageList: [],
      loading: false
    }
  },

  created() {
    document.body.style.backgroundColor = '#fff';
  },

  mounted() {
    this.$setTitle('直播历史');
    this.pageLiveStageApp();
    this.getLiveDetail();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    async pageLiveStageApp() {
      const data = await pageLiveStageApp({
        offset: (this.page - 1) * this.size,
        size: this.size,
        liveId: this.$route.params.liveId,
      });
      this.liveStageList = data.list;
    },

    async getLiveDetail() {
      const data = await getLiveDetail(this.$route.params.liveId);
      if(data.list[0].status === 4) {
        Dialog.alert({
          message: '此直播间已下架'
        }).then(() => closeWebView())
      }
    },

    async reachBottom() {
      try {
        this.loading = true;
        ++this.page;
        const data = await pageLiveStageApp({
          offset: (this.page - 1) * this.size,
          size: this.size,
          liveId: this.$route.params.liveId,
        });
        this.liveStageList = this.liveStageList.concat(data.list);
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    formatDate(date, format) {
      const day = dayjs(date, 'YYYY-MM-DD HH:mm:ss');
      return dayjs().isSame(day, 'day') ? '今天' : day.format(format);
    }
  }
}
</script>

<style lang="less">
.live-history {
  border-top: 10px solid #f5f6f6;
  padding-right: 15px;

  .timeline-item {
    padding-bottom: 0;

    &:first-child .timeline-text{
      color: #eb4339 !important;
    }
  }

  .timeline-content {
    padding-top: 30px;
    margin-left: -35px;
  }

  .live-history-item {
    background: #F5F6F6;
    border-radius:4px;
    color: #5e616b;

    .item-top {
      padding: 10px;

      p {
        margin-top: 10px;
        font-size: 14px;
      }
    }

    .item-bottom {
      display: flex;
      padding: 10px;

      div {
        flex: 1;
        color: #999;
        font-size: 12px;

        * {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
